<template>
	<view class="content">
		<view class="headerBox" :style="{backgroundImage: 'url('+BgcImg+')', 'background-repeat':'no-repeat', backgroundSize:'100% 100%'}" >
			<view class="title">可用余额</view>
			<view class="money"><text>¥</text>{{ userInfo.balance}}</view>
			<view class="tips" @click="Topath('/pages/user/membercz/rechargerecord')">消费&充值记录</view>
		</view>
		<view class="moneyBox">
			<view class="header">余额充值</view>
			<view v-if="ruleList.length>0" class="radioBox">
				<radio-group class="listBox" @change="radioChange">
					<label class="list" v-for="(item, index) in ruleList" :key="index">
						<view class="title">¥{{item.rechargeMoney}}</view>
						<view class="info"><text>送</text>¥{{item.giveeMoney}}</view>
						<radio :checked="payMoney==item.rechargeMoney?true:false" :value="item.rechargeMoney"
							:color="template.color.temp_color"/>
					</label>
				</radio-group>
			</view>
			<view class="other">
				<view class="title">其它</view>
				<input type="digit" v-model="payMoney" placeholder="请输入充值金额" />
				<view class="info">元</view>
			</view>
			<view class="button" @click="getRechargeOrder()">确认充值</view>
		</view>



	</view>
</template>

<script>
	import { appletsWechatOrderPay,searchUserInfoById,getPlugsConfigInfo,partnerAppletsWechatOrderPay } from '../../../utils/api.js';
	export default {
		data() {
			return {
				openId: uni.getStorageSync('__ddminiUserOpenid'),
				userInfo: '',
				userDetails: {
					moneys: 0,
					score: 0
				},
				moneyNumber: '',
				payList: '',
				ruleList: [],
				rechargeOrder: '',
				BgcImg:'',
				integral:0,
				 current: '',
				 payMoney:'',
				 balance:0,
				 nowBusinessInfo:{}
			}
		},
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
			this.getInfo()
		},
		onLoad() {
			let self = this;
			// self.gethomeInfo();
			// self.getInfo();
			self.getSelectList();
		},
		methods: {
			Topath(route) {
				uni.navigateTo({
					url: route
				})
			},
			radioChange(e){
				this.payMoney=e.detail.value;
			},
			getSelectList(){
				let self=this;
				getPlugsConfigInfo({id:173}).then(res=>{
					if(res.code==200){
						self.ruleList=JSON.parse(res.body.plugsConfigJson);
					}
				})
			},
			
			getInfo() {
				let data={
					userId:uni.getStorageSync('userInfo').id
				}
				searchUserInfoById( data).then(res => {
					if (res.code == 200) {
						this.userInfo = res.body;
						// self.balance=res.body.balance;
						// self.integral = res.body.integral;
					}
				})
			},
			getRechargeOrder() {
				let self = this;
				let postData = {
					"client": "小程序",
					"openId": self.openId,
					"payMoney": self.payMoney,
					"payWay": 1,
					"payType":2,
					"businessId":self.nowBusinessInfo.jsonViewData.businessId.toString()
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				// console.log(postData,'微信支付')
			partnerAppletsWechatOrderPay(postData).then(res=>{
				if(res.code==200){
					let payList=res.body
					let data = res.body;
					var RSA = require('@/utils/wxapp_rsa.js')
					let paySign =
						`${data.appid}\n${data.timestamp}\n${data.noncestr}\nprepay_id=${data.prepay_id}\n`
					// 私钥、商户API证书下载后，私钥 apiclient_key.pem 的内容
					let sikey = `-----BEGIN PRIVATE KEY-----
								MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCkKmpbnA4QnZmD
								OVLPPORVj6YNLW+kdc17raHgMng5FXVZ3D6ZxthYHgnJUMSGD82BdqVmOwOvkhwt
								hyCl8gpEi5JOr/88UMlSEwrwQWhKFQFA4SpMW489H+yuQkcUKKHZYQgOGgEoFN8r
								WvqYfhBgixxcoDlzcp4VKzCrM6yibD+BkVBcjRdrWFQhloQyR/Dc+HDAZsQYXlJi
								moUGeYq/BDircT8Vfs8wB3fTx7FoBqfbvkposv+VjjijEAhCR6VRaV7MKPTR4nof
								fo7gHcTg6CGlQaepfwOF4rDmZPFVQXIgphAF17OGUTbw45jpAplWLzh3XYdNvawU
								EZz5MPmzAgMBAAECggEAPTIKf6fGnm8BQKdntRTv0O1Bavwa9+Vp+caZ5ycpJa5Y
								Fm1BcLVtBDv+TesrtwXBB5egxGEPWK1Qj7AlfXaiWTbmDSsSK/u5cDzlAPaA18zI
								sNS+ncQruw9hfPv73wnee1fuVsNe1wAgyNqbO6kSlcqFggnAIMcDIsT82XTjz4+N
								of6sJxQfCwSOR3WKV4r+9F4KXPgre+0wm5aNSQhW1KfV1r918DtHjcDxtvOZn7PB
								GFj/xx3UacZdDOfauqZSMf4ZghCHBCBH/LOVmk3hqEokHHdzP36dm6/CkVoK+sbF
								FYCNlD/t1FUShXbEh+iHnSPbA51Vo5f1+OPKlW99AQKBgQDSJFcWLXuW8DIyz+UN
								5ZL++nFkSWyAShACeOC81fk6wEiatmbmAa0Qs6OcAJuYDeRwt47FX9fsNvm9hud8
								BueYNPmmC0mhO1PSRWQCKDghY+F0/nSV8QB44pR5o7m2yV+B/Pyg12qbBOTg3NLY
								yKYpaxwcDFWEEmRLusAZCLizcwKBgQDH/Zf4W58yUTzK/l3iY4luYZBDMjA5/yFv
								kndQxqsGpzS6KQtOCS5RLhC+1176h8lNy7NdNqca6x15QJ2UhqUOeFVcqbatjaL2
								bv4gro4j2nVOgKmR03fto7s3BKtPHlFPON//R28bWmPm+ap/S/aWS6doNQpOCqW1
								mLKI5LuQwQKBgGbbXrz+OjYhD5ELbSQmMJMZZpMd1TveBIQRQn9rhHgbUe5YRXlj
								bKB2LSjYq0/7zMrXLcyyIu/94LPB6mAsyQMZOvDpKXr/nQGY8WCU6xR83Qf03H/f
								3MlOrjnzx50OZ+8qM0VO62FBPf5KV/HAFITFZpbb+qeQkQL4P7qBKFa9AoGBAKal
								aAbpweQZ0YCNKQpGSvSRk7aKkakiMWhZMdc7VLP8jHE7VlI2UEQREJ8Vs+0rTNDo
								lpNrwR8rH6oz75sd/1fpaagHO1OvHEYhAt2U1piFpw49JA+BmQOKVaxo1Z7d8n8D
								M5PyoGC4l1qWXD4qvFVMwTiSSf3x3VdO4CY2Ax2BAoGATYQfX/vxk6v7gVr4fBQU
								jCd25kxrhQ5GZ1tvL8HND/pz3o1qu5stGAhoM7t2+w6/OxwDCBluKwYx9fcaP1tI
								vA9ebRwGmUQTojjPwQMNfbuQdD1xIq+C6fKg0cSCvRfwDQxXTsjJgpE6Qhs9LygL
								E7Tysgyd8jjH5lEj8r3qCSU=-----END PRIVATE KEY-----`
					
						// 加签
						var sign_rsa = new RSA.RSAKey();
						sign_rsa = RSA.KEYUTIL.getKey(sikey);
						var hashAlg = 'sha256';
						var hSig = sign_rsa.signString(paySign, hashAlg);
						hSig = RSA.hex2b64(hSig); // hex 转 b64
						uni.hideLoading();
					wx.requestPayment({
						appId: payList.appid,
						nonceStr: payList.noncestr,
						package: payList.package,
						signType: 'MD5',
						timeStamp: payList.timestamp,
						paySign: hSig,
						success: function(res) {
							uni.hideLoading();
							uni.showToast({
								title: '微信支付成功'
							});
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/money/paySuccess'
								})
							}, 600);
						},
						fail: function(err) {
							uni.hideLoading();
							uni.showModal({
								title: '支付失败',
								content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
								showCancel: false
							});
							return;
						}
					});
				}
			})
		}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}

	.headerBox {
		width: 96%;
		height: 300rpx;
		border-radius: 16rpx;
		margin:20rpx auto;
		// background-color: #ffde59;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		position: relative;
		justify-content: center;

		.title {
			font-size: 28rpx;
			color: #1f1f1f;
			font-weight: bold;
		}

		.money {
			font-size: 80rpx;
			font-weight: bold;
			display: flex;
			align-items: flex-end;
			padding-bottom: 20rpx;
			color: #e74032;

			text {
				font-size: 40rpx;
				padding-right: 8rpx;
				padding-bottom: 20rpx;
			}
		}

		.tips {
			color: #1f1f1f;
			font-size: 26rpx;
			position: absolute;
			bottom: 30rpx;
			opacity: .6;
		}
	}

	.moneyBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		justify-content: center;

		.header {
			color: #1f1f1f;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: bold;
		}

		.listBox {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 85%;
			.list {
				width: 280rpx;
				display: flex;
				flex-direction: column;
				border: 2rpx solid #efefef;
				margin-bottom: 30rpx;
				justify-content: center;
				padding-left: 20rpx;
				position: relative;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				border-radius: 10rpx;
				.title {
					font-size: 36rpx;
					color: #F54319;
					font-weight: bold;
				}

				.info {
					color: #999;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						padding-right: 4rpx;
					}
				}

				radio {
					position: absolute;
					right: 20rpx;
					zoom: 0.8;
				}
			}
		}

		.other {
			width: 85%;
			display: flex;
			border: 2rpx solid #efefef;
			height: 80rpx;
			align-items: center;
			margin: 0 auto;
			border-radius: 10rpx;

			.title {
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				height: 100%;
				background-color: #efefef;
			}

			input {
				flex: 1;
				height: 100%;
				display: flex;
				padding-left: 20rpx;
				color: #1f1f1f;
			}

			.info {
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				background-color: #efefef;
			}
		}

		.button {
			width: 85%;
			height: 90rpx;
			margin: 0 auto;
			background-color:#6da7de;
			color: #fff;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			border-radius: 10rpx;

			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
</style>
